<template>
  <div class="tp-body">
      <!-- banner -->
    <WidgetsStatsA />
    <!-- sun -->
    <!-- <CRow>       
      <CCol :md="12">
        <CCard class="card mb-4">
          <CCardFooter>
            <CRow :xs="{ cols: 1 }" :md="{ cols: 5 }" class="text-center">
              <CCol class="mb-sm-2 mb-0">
                <strong>$0.0000000825</strong>
                <div class="text-medium-emphasis">Price</div>
              </CCol>
              <CCol class="mb-sm-2 mb-0 d-md-down-none">
                <strong>413,548+</strong>
                <div class="text-medium-emphasis">Holders</div>
              </CCol>
              <CCol class="mb-sm-2 mb-0">
                <strong>62.46%</strong>
                <div class="text-medium-emphasis">Burned</div>
                <CProgress
                  class="mt-2"
                  color="blue"
                  thin
                  :precision="1"
                  :value="62.46"
                />
              </CCol>
              <CCol class="mb-sm-2 mb-0">
                <strong>375,311 B</strong>
                <div class="text-medium-emphasis">Circuating</div>
              </CCol>
              <CCol class="mb-sm-2 mb-0 d-md-down-none">
                <strong>$309,701,603</strong>
                <div class="text-medium-emphasis">Market Cap</div>
              </CCol>
            </CRow>
          </CCardFooter>
        </CCard>
      </CCol>
    </CRow> -->
    <!-- project backgroud -->
    <CRow class="project-backgroud">
         <div class="title">
            Project Backgroud
            <h1>JGame`s Metaverse</h1>
        </div>
        <!-- 1 -->
        <CCol :sm="6" :lg="4" style="margin-bottom: 2rem;">
            <CCard class="jgme-card mb-4">
                <div class="img-logo">
                    <div class="img-logo-bg">
                        <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        fill="currentColor"
                        class="bi bi-projector-fill"
                        viewBox="0 0 16 16"
                    >
                        <path
                        d="M2 4a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2 1 1 0 0 0 1 1h1a1 1 0 0 0 1-1h6a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1 2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H2Zm.5 2h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1 0-1ZM14 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-12 1a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Z"
                        />
                        </svg>
                    </div>
              </div>
              <div class="text">
                <strong>JGame Games</strong>
                <div>As the world`s Leading Play to Earngame platform, YooShi Games is the owner of products and services such as GameFi LaunchPad, NFT Marketplace, NFT Mining, Farms and ImYooShi Wallet. It is committed to providing hight-quality P2E games for global game users.</div>
              </div>
              </CCard>
        </CCol>
        <!-- 2 -->
        <CCol :sm="6" :lg="4" style="margin-bottom: 2rem;">
            <CCard class="jgme-card mb-4">
                <div class="img-logo">
                    <div class="img-logo-bg">
                    <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    fill="currentColor"
                    class="bi bi-projector-fill"
                    viewBox="0 0 16 16"
                >
                    <path
                    d="M2 4a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2 1 1 0 0 0 1 1h1a1 1 0 0 0 1-1h6a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1 2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H2Zm.5 2h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1 0-1ZM14 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-12 1a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Z"
                    />
                </svg>
              </div>
              </div>
              <div class="text">
                <strong>JGame Games</strong>
                <div>As the world`s Leading Play to Earngame platform, YooShi Games is the owner of products and services such as GameFi LaunchPad, NFT Marketplace, NFT Mining, Farms and ImYooShi Wallet. It is committed to providing hight-quality P2E games for global game users.</div>
              </div>
              </CCard>
        </CCol>
        <!-- 3 -->
        <CCol :sm="6" :lg="4" style="margin-bottom: 2rem;">
            <CCard class="jgme-card mb-4">
                <div class="img-logo">
                    <div class="img-logo-bg">
                    <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    fill="currentColor"
                    class="bi bi-projector-fill"
                    viewBox="0 0 16 16"
                >
                    <path
                    d="M2 4a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2 1 1 0 0 0 1 1h1a1 1 0 0 0 1-1h6a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1 2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H2Zm.5 2h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1 0-1ZM14 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-12 1a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Z"
                    />
                </svg>
              </div>
              </div>
              <div class="text">
                 <strong>JGame Games</strong>
                <div>As the world`s Leading Play to Earngame platform, YooShi Games is the owner of products and services such as GameFi LaunchPad, NFT Marketplace, NFT Mining, Farms and ImYooShi Wallet. It is committed to providing hight-quality P2E games for global game users.</div>
              </div>
            </CCard>
        </CCol>
    </CRow>
    <!-- JGame Token -->
    <CRow class="JGame-Token">
         <div class="title">
            <CButton class="info-btn" color="info" >
              {{ i18n.t('home.tokenBtn') }}
            </CButton>
            <h1>JGame Token</h1>
        </div>
        <CRow :sm="7" :lg="7" >
            <CCol :sm="10" :lg="8" style="" >
                <div class='text'>
                  YooShi is a token on Binance Smart China boasting carious impressive features.
                  Designed with burning mechanism, the total circulation supply of YooShi will be exponentially cut. Besides, by combining burning mechanism, innovative Auto-Liquidity function and NFT together, YooShi Liquidity is allowed to increase rapidly. One of the most important features of YooShi is that it practices a large-scale decentralization which is rare for other tokens.
                  Mixing these three outstanding features together, users are able to get a power house token out of the hands of anyone, except the community.
                </div>
                <CRow class='text-img-body'>
                    <!-- 1 -->
                    <CCol :sm="2" :lg="4" class='text-img-item'>
                        <img class="img" src="../assets/images/home/token1.png" alt="slide 3" />
                        <div class="text-img-item-text">
                            <strong>10%</strong>
                            <p>Gradually Destroy</p>
                        </div>
                    </CCol>
                    <!-- 2 -->
                    <CCol :sm="2" :lg="4" class='text-img-item'>
                        <img class="img" src="../assets/images/home/token2.png" alt="slide 3" />
                        <div class="text-img-item-text">
                            <strong>10%</strong>
                            <p>Gradually Destroy</p>
                        </div>
                    </CCol>
                    <!-- 3 -->
                    <CCol :sm="2" :lg="4" class='text-img-item'>
                        <img class="img" src="../assets/images/home/token3.png" alt="slide 3" />
                        <div class="text-img-item-text">
                            <strong>10%</strong>
                            <p>Gradually Destroy</p>
                        </div>
                    </CCol>
                </CRow>
            </CCol>
            <CCol :sm="3" :lg="3" style="text-align: end" >
                <img class="d-block w-100" src="../assets/images/home/about-jgame.png" alt="slide 3" />
            </CCol>
        </CRow>
    </CRow>
    <CRow>
        <CCol :sm="12" :lg="4">
          <div class="group-item">
            <div class="item-card">
              <div class="item-card-img-body">
                <img class="img" src="../assets/images/about/icon1.png" alt="">
              </div>
              <div class="item-card-color">
                <div class="item-title">
                  <strong>Economic System</strong>
                  <p>a.10% transaction fee</p> 
                  <p>b.Specific burn condition</p> 
              </div>
              </div>
            </div>
          </div>
        </CCol>
        <CCol :sm="12" :lg="4">
          <div class="group-item">
            <div class="item-card">
              <div class="item-card-img-body">
                <img class="img" src="../assets/images/about/icon2.png" alt="">
              </div>
              <div class="item-card-color">
                <div class="item-title">
                  <strong>Product Level</strong>
                  <p>a.Mining Pool</p> 
                  <p>b.YooShi NFT PublicAuction</p> 
              </div>
              </div>
            </div>
          </div>
        </CCol>
        <CCol :sm="12" :lg="4">
          <div class="group-item">
            <div class="item-card">
              <div class="item-card-img-body">
                <img class="img" src="../assets/images/about/icon3.png" alt="">
              </div>
              <div class="item-card-color">
                <div class="item-title">
                  <strong>Economic System</strong>
                  <p>a.IGO</p> 
                  <p>b.Game Marketplace</p> 
                  <p>c.NTF Market</p> 
              </div>
              </div>
            </div>
          </div>
        </CCol>
      </CRow>
    <!-- Black -->
    <CRow class="Black">
         <div class="title">
          <h1>Black Hole Algorithm</h1>
          <p>The Black Hole Owned over 50% of supply at launch.The Black Hole counts as one of the wallet holders that 4% of transactions are distributed to. This results in exponential growth of the black hole and expomential burn of the token supply.</p>
          <CRow>
            <!-- 1 -->
            <CCol :sm="6" :lg="4">
              <div class="Black-item">
                <div class="item-card">
                  <div class="item-card-img-body">
                    <img class="img" src="../assets/images/about/blackIcon1.png" alt="">
                  </div>
                  <div class="item-card-color">
                    <div class="item-title">
                      <strong>Unruggable</strong>
                      <p>Liquidity is locked in PancakeSwap and the ownership of contract has been transferre to the burn address</p> 
                  </div>
                  </div>
                </div>
              </div>
            </CCol>
            <!-- 2 -->
            <CCol :sm="6" :lg="4">
              <div class="Black-item">
                <div class="item-card">
                  <div class="item-card-img-body">
                    <img class="img" src="../assets/images/about/blackIcon2.png" alt="">
                  </div>
                  <div class="item-card-color">
                    <div class="item-title">
                      <strong>Fair Launch</strong>
                      <p>100% YooShi supply is seeded as liquidity, which means that there is no presale and no allocation to team members</p> 
                    </div>
                  </div>
                </div>
              </div>
            </CCol>
            <!-- 3 -->
            <CCol :sm="6" :lg="4">
              <div class="Black-item">
                <div class="item-card">
                  <div class="item-card-img-body">
                    <img class="img" src="../assets/images/about/blackIcon3.png" alt="">
                  </div>
                  <div class="item-card-color">
                    <div class="item-title">
                      <strong>Safe AUto-Farming</strong>
                      <p>Liquidity is locked in PancalkeSwap and the ownership of contract has been transferred to the burn address</p> 
                  </div>
                  </div>
                </div>
              </div>
            </CCol>
            <!-- 4 -->
            <CCol :sm="6" :lg="4">
              <div class="Black-item">
                <div class="item-card">
                  <div class="item-card-img-body">
                    <img class="img" src="../assets/images/about/blackIcon4.png" alt="">
                  </div>
                  <div class="item-card-color">
                    <div class="item-title">
                      <strong>Unruggable</strong>
                      <p>Liquidity is locked in PancalkeSwap and the ownership of contract has been transferred to the burn address</p> 
                  </div>
                  </div>
                </div>
              </div>
            </CCol>
             <!-- 5 -->
            <CCol :sm="6" :lg="4">
              <div class="Black-item">
                <div class="item-card">
                  <div class="item-card-img-body">
                    <img class="img" src="../assets/images/about/blackIcon5.png" alt="">
                  </div>
                  <div class="item-card-color">
                    <div class="item-title">
                      <strong>Fair Launch</strong>
                      <p>100% YooShi supply is seeded as liquidity, which means that there is no presale and no allocation to team members</p> 
                    </div>
                  </div>
                </div>
              </div>
            </CCol>
             <!-- 6 -->
            <CCol :sm="6" :lg="4">
              <div class="Black-item">
                <div class="item-card">
                  <div class="item-card-img-body">
                    <img class="img" src="../assets/images/about/blackIcon6.png" alt="">
                  </div>
                  <div class="item-card-color">
                    <div class="item-title">
                      <strong>Safe AUto-Farming</strong>
                      <p>Liquidity is locked in PancalkeSwap and the ownership of contract has been transferred to the burn address</p> 
                  </div>
                  </div>
                </div>
              </div>
            </CCol>
          </CRow> 
        </div>
    </CRow>
    <!-- Frequently -->
     <CRow class="Black">
         <div class="title">
          <h1>Frequently Asked Questions</h1>
        </div>
        <div class="img-body">
          <img class="img" src="../assets/images/about/Frequently.png" alt="">
        </div>
    </CRow>
    <!-- Frequently -->
     <CRow class="Black">
         <div class="title">
          <h1>RoadMap</h1>
        </div>
        <div class="img-body">
          <img class="img" src="../assets/images/about/road.png" alt="">
        </div>
    </CRow>
  </div>
</template>

<script>
import WidgetsStatsA from './widgets/WidgetsStatsTypeA.vue'
import { useI18n } from 'vue-i18n'
import { icon1 } from '@/assets/images/about/icon1.png'
import { icon2 } from '@/assets/images/about/icon2.png'
import { icon3 } from '@/assets/images/about/icon3.png'

export default {
  name: 'Dashboard',
  components: {
    WidgetsStatsA,
  },
  setup() {
    const groupItems =[
      {
        name:'Economic System',
        text1:'a.10% transaction fee',
        text2:'b.Specific burn condition',
        img:'icon1'
      }
    ];
    const i18n = useI18n()
    return {
        icon1,
        icon2,
        icon3,
        i18n,
        groupItems
    }
  },
}
</script>

<style scoped lang="scss">
@import "~@/styles/custom";
.card {
  color: cornflowerblue;
  .card-footer {
    background: none;
    strong {
      font-size: 1.3rem;
    }
  }
}

.group-item {
  margin-bottom: 1rem;
  background: #fff;
  -webkit-box-shadow: $boxShadow;
  box-shadow: $boxShadow;
  border-radius: 1rem;
  padding: 1rem;
  .item-title {
    strong {
      font-size: 1.5rem;
    }
  }
  .item-card {
    padding: 1rem 0;
    .item-card-img-body {
      max-width: 10rem;
      img {
        width: 100%;
      }
    }
    .item-card-color {
      padding: 1rem;
      color: #333;
      .item-title {
        min-height: 10rem;
        strong {
          padding-bottom: 1rem;
        }
      }
    }
  }
}

.project-backgroud {
  background-image: linear-gradient(to bottom, #cfdef773, #ffffff);
  text-align: center;
  padding: 5%;
  .title {
    color: #80aefd;
    padding: 2rem;
    margin-bottom: 2rem;
    h1 {
      color: #000;
    }
  }
  .jgme-card {
    margin-bottom: 5rem;
    -webkit-box-shadow: 0 3px 9px #cfdef7f1;
    box-shadow: 0 3px 9px #cfdef7f1;
    .img-logo {
      position: relative;
      background: #fff;
      top: -2.5rem;
      left: 38%;
      width: 5rem;
      height: 5rem;
      -webkit-box-shadow: 0 3px 9px #cfdef7f1;
      box-shadow: 0 3px 9px #cfdef7f1;
      border-radius: 180%;
      .img-logo-bg {
        width: 4rem;
        height: 4rem;
        margin: 0.5rem auto;
        padding: 3%;
        border-radius: 180%;
        background: #80aefd7c;
        svg {
          width: 3rem;
          height: 3.5rem;
          margin: auto;
        }
      }
    }
    .text {
      min-height: 16rem;
      margin-top: -1.5rem;
      padding: 0 2rem 2rem 2rem;
      color: #000;
      strong {
        font-size: 1.3rem;
      }
    }
  }
}

.JGame-Token {
  padding: 5%;
  .title {
    margin-bottom: 1rem;
    .info-btn {
      color: $info-btn-color;
      background-image: $info-btn;
      margin-bottom: 1rem;
    }
  }
  .text {
    min-height: 16rem;
  }
  .text-img-body {
    text-align: left;
    .text-img-item {
      display: flex;
      .img {
        width: 3.5rem;
        height: 3.5rem;
      }
      .text-img-item-text {
        margin-left: 1rem;
      }
    }
  }
}

.Black{
  margin-top: 10%;
   .title {
    margin-bottom: 1rem;
    text-align: center;
  }
  .Black-item{
    padding: 1rem;
  }
  .img-body{
    width: 100%;
    img{
      width: 100%;
    }
  }
}
</style>
